<template>
  <div class="modelscontainer">
    <!-- 模型搜索栏 -->
    <div class="subcontainer1">
      <div class="searchcontainer">
        <div class="model_research">
          <input
            type="text"
            autocomplete="false"
            placeholder="请输入内容"
            class="model_research_input"
            v-model="input"
            style="font-size: 16px"
          />
          <el-button
            type="primary"
            icon="el-icon-search"
            style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;background-color: #1479d7;font-size: 16px;}"
            >搜索</el-button
          >
        </div>
        <el-button
          type="primary"
          style="margin-left: 10px; background-color: #1479d7; font-size: 16px"
          @click="showDataRegister = !showDataRegister"
          >数据注册</el-button
        >
      </div>
    </div>

    <!-- 数据展示栏 -->
    <div class="subcontainer2">
      <div class="datacardcontainer">
        <!-- <div class="mask"></div> -->
        <div class="datacard" v-for="(item, index) in datalist" :key="index">
          <div class="top-section">
            <img :src="item.img" alt="" />
            <div class="name">
              <span>{{ item.name }}</span>
            </div>
          </div>
          <div class="info-section">
            <h2>
              About
              <div class="border"></div>
            </h2>
            <div class="about-txt">
              <p>
                {{ item.description }}
              </p>
            </div>

            <h2>
              Contact
              <div class="border"></div>
            </h2>
            <div class="s-m">
              <div class="contact-info">
                <!-- <a href="" class="fas fa-user-alt"></a> -->
                <p>Contributor：</p>
                <div class="contactname">{{ item.contributor }}</div>
              </div>
              <div class="contact-info">
                <!-- <a href="" class="fas fa-envelope"></a> -->
                <p>Data type：</p>
                <div class="contactname">{{ item.type }}</div>
              </div>
              <div class="contact-info">
                <!-- <a href="" class="fas fa-envelope"></a> -->
                <p>Date：</p>
                <div class="contactname">{{ item.date }}</div>
                <el-button
                  size="small"
                  class="common-btn"
                  @click="downFile(index)"
                >
                  <i class="fa-solid fa-cloud-arrow-down"></i>
                  Download
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据注册栏 -->
    <div class="hoverCard" v-drag v-show="showDataRegister">
      <div class="title">
        <i class="fas fa-tools"></i>
        <p>数据共享</p>
      </div>
      <div class="content">
        <div class="content-item">
          <label for="name">数据名称:</label>
          <el-input
            id="name"
            v-model="model.name"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="content-item">
          <label for="description">数据描述:</label>
          <el-input
            id="description"
            v-model="model.description"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="content-item">
          <label for="url">数据地址:</label>
          <el-input
            id="url"
            v-model="model.url"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="content-item">
          <label for="url">数据文件:</label>

          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import "../assets/css/data.css";
import drag from "../assets/js/drag.js";
import { config } from "../plugins/config.js";
export default {
  data() {
    return {
      useInfo: JSON.parse(localStorage.getItem("user")),
      input: "",
      showDataRegister: false,
      model: {
        name: "",
        availably: true,
        url: "",
        contributor: "",
        img: "",
        email: "",
        description: "",
      },

      datalist: [
        {
          name: "BasinData_wjb",
          img: "http://127.21.212.124:8181/DataImg/BasinData_wjb.png",
          description:
            "Contains topography, cumulative volume of confluence, flow direction and river network data of Wangjiaba",
          contributor: "Yuanqing He",
          type: "Raster",
          date: "2023年06月07日",
          url: "http://127.21.212.124:8181/BasinData_wjb.zip",
        },
        {
          name: "RainsData_wjb",
          img: "http://127.21.212.124:8181/DataImg/RainsData_wjb.png",
          description:
            "Contains rainfall data for Wangjiaba from January 1, 2009 to December 31, 2010",
          contributor: "Yuanqing He",
          type: "Raster",
          date: "2023年06月07日",
          url: "http://127.21.212.124:8181/Rains_wjb.zip",
        },
        {
          name: "PetsData_wjb",
          img: "http://127.21.212.124:8181/DataImg/PetsData_wjb.png",
          description:
            "Contains evaporation data for Wangjiaba from January 1, 2009 to December 31, 2010",
          contributor: "Yuanqing He",
          type: "Raster",
          date: "2023年06月07日",
          url: "http://127.21.212.124:8181/PETs_wjb.zip",
        },
      ],
    };
  },
  mounted() {
    const _this = this;
    _this.modellist = [];
    axios.post(config.ip + "getModels", this.useInfo.id).then((resp) => {
      let respData = resp.data;

      for (let index = 0; index < respData.length; index++) {
        let modelItem = {};
        const element = respData[index];
        modelItem.name = element.modelInfo.name;
        modelItem.contributor = element.userInfo.name;
        modelItem.img = config.ip + element.modelInfo.img;
        modelItem.email = element.userInfo.email;
        modelItem.description = element.modelInfo.description;
        _this.modellist.push(modelItem);
      }

      // console.log(resp.data);
    });
  },
  methods: {
    async downFile(index) {
      var url = this.datalist[index].url;
      var fileName = this.datalist[index].name;
      await fetch(url, {
        headers: new Headers({
          Origin: location.origin,
        }),
        mode: "cors",
      })
        .then((response) => response.blob())
        .then((blob) => {
          let blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.download = fileName;
          a.href = blobUrl;
          document.body.appendChild(a);
          a.click();
          a.remove();
        })
        .catch((e) => console.error(e));
    },
  },
};
</script>